import React, { useState } from 'react'
import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
// @tinymce/tinymce-react
export default function Index() {
    const editorRef = useRef(null);
    const [content, setContent] = useState('')
    const log = () => {
        if (editorRef.current) {
            console.log(editorRef.current.getContent());
            setContent(editorRef.current.getContent())
            alert('发布成功')
        }
    };
    return (
        <div>
            <Editor
                apiKey='ivpz9xmthidachm081872iyoggy9a8llrhd7nw99xibyz9hp'
                onInit={(_evt, editor) => editorRef.current = editor}
                // 初始值
                initialValue="<p>This is the initial content of the editor.</p>"
                // 初始化配置
                init={{
                    height: 500,
                    menubar: false,
                    // 语言包
                    language: 'zh_CN',
                    // 插件
                    plugins: [
                        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                    ],
                    //   工具栏
                    toolbar: 'undo redo | blocks | ' +
                        'bold italic forecolor | alignleft aligncenter ' +
                        'alignright alignjustify | bullist numlist outdent indent | ' +
                        'removeformat | help',
                    //  内容样式配置项
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                }}
            />
            <button onClick={log}>Log editor content</button>
            {/* 输出内容将带标签的内容渲染 */}
            <div dangerouslySetInnerHTML={{ __html: content }}></div>
        </div>
    )
}
